<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="true"/>

    <title>Handle error</title>

    <link rel="stylesheet" href="../examples.css">

    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script type="text/javascript" src="../../dist/iink.min.js"></script>
  </head>

  <body>
    <div id="result"></div>
    <div>
      <div id="editor" touch-action="none"></div>
    </div>
    <script>
      const editorElement = document.getElementById('editor');

      editorElement.addEventListener('error', (evt) => {
        if(evt.detail && evt.detail.type !== 'close') {
          document.querySelector('#result').innerText = JSON.stringify(evt.detail);
        }
      });

      /**
       * Attach an editor to the document
       * @param {Element} The DOM element to attach the ink paper
       * @param {Object} The recognition parameters
       */
      iink.register(editorElement, {
        recognitionParams: {
          server: {
            applicationKey: 'xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
            hmacKey: 'xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
          }
        }
      });

      window.addEventListener('resize', () => {
        editorElement.editor.resize();
      });
    </script>
  </body>

</html>